<template>
  <div class="pages" tabindex="0" ref="pageContainer">
    <div class="left">
      <!-- <p class="title-left">
        {{ name }}
      </p> -->
      <!-- <div v-if="isEdit" class="flex edit-title">
        <ElInput
          v-model="name"
          placeholder="请输入"
          clearable
          type="textarea"
          maxlength="100"
          autosize
          show-word-limit
          @input="handleNameInput"
          @blur="validateName"
          style="
            width: 168px;
            border-radius: 3px;
            border: 1px solid #2f69eb;
          "          
        />
        <img :src="imgSrc" alt="" class="dui" @click="save" />
        <img :src="imgSrc1" alt="" class="dui" @click="cancelEdit" />
      </div>
      <div v-else>
        <div class="title-left">
          {{ name }}
          <img
            class="edit"
            src="/static/mediaList/video/edit.png"
            alt=""
            @click="isEdit = true"
          />
        </div>
      </div> -->
    </div>
    <div class="center">
      <div class="video-container">
        <div class="video-title-info">
          <img src="/static/mediaList/video/time.png" alt="" class="time" />
          <span>
            {{ record?.takeTime || "--" }}
          </span>
          <span style="margin-left: 12px;">
            {{ record?.fileSize || "--" }}
          </span>
          <span style="margin-left: 12px;">
            {{ record?.resolution || "--" }}
          </span>
        </div>
        <div class="center-top">
          <div class="info-top">
            <!-- <span>{{ record?.fileSize || "--" }}KB</span>
            <span>{{ record?.resolution || "--" }}像素</span> -->
            <!-- <ElTooltip :content="name" placement="right">
              <span class="single-line-ellipsis">{{ name }}</span>
            </ElTooltip> -->
            <ElPopover
              placement="top"
              trigger="hover"
              :width="300"
              v-if="name.length > 30"
            >
              <template #reference>
                <span class="spanText single-line-ellipsis">{{ name }}</span>
              </template>
              <div class="multi-line-content">
                {{ name }}
              </div>
            </ElPopover>
            <span class="spanText single-line-ellipsis" v-else>{{ name }}</span>
            <span>{{ currentIndex + 1 }}/{{ imgList.length }}</span>
          </div>
        </div>
        <div
          class="video-container-img"
          @mousedown="startDrag"
          @mousemove="duringDrag"
          @mouseup="endDrag"
          @mouseleave="endDrag"
        >
          <!-- 大图显示Swiper -->
          <swiper
            ref="mainSwiper"
            :modules="modules"
            :slides-per-view="1"
            :space-between="0"
            :navigation="{
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            }"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            class="main-swiper"
          >
            <swiper-slide v-for="(item, index) in imgList" :key="item.id">
              <img
                :src="item.fileUrl"
                crossorigin="anonymous"
                alt=""
                class="video"
                :style="getImageStyle(item.id)"
              />
            </swiper-slide>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </swiper>
        </div>
        <div class="video-btns">
          <img
            src="/static/mediaList/img/big.png"
            class="img-center margin-left"
            alt=""
            @click="zoomIn"
          />
          <img
            src="/static/mediaList/img/reduce.png"
            class="img-center margin-left"
            alt=""
            @click="zoomOut"
          />
          <span
            class="margin-left"
            style="
              position: relative;
              display: inline-flex;
              align-items: center;
            "
            @click="resetScale"
          >
            1:1
            <span class="divider"></span>
          </span>
          <img
            src="/static/mediaList/img/tleft.png"
            class="img-center margin-left"
            alt=""
            @click="rotateLeft"
          />
          <img
            src="/static/mediaList/img/tright.png"
            class="img-center margin-left"
            alt=""
            @click="rotateRight"
          />
          <div
            style="
              position: relative;
              display: inline-flex;
              align-items: center;
            "
          >
            <img
              src="/static/mediaList/img/dowload.png"
              class="img-center margin-left"
              alt=""
              @click="downloadItem"
            />
            <span class="divider"></span>
          </div>

          <img
            src="/static/mediaList/img/del.png"
            class="img-center margin-left"
            alt=""
            @click="delItem"
          />
          <!-- <img
            src="/static/mediaList/img/detail.png"
            class="img-center margin-left"
            alt=""
            @click="toggleShowDetail"
          /> -->
          <img
            src="/static/mediaList/img/screen.png"
            class="img-center margin-left"
            alt=""
            @click="toggleFullScreen"
          />
          <!-- <img
            src="/static/mediaList/img/share.png"
            class="img-center margin-left"
            alt=""
            @click="toggleShare"
          /> -->
        </div>
        <!-- 缩略图导航 -->
        <div class="thumbnail-container">
          <div
            v-if="imgList.length >= 8"
            class="thumb-nav-button thumb-nav-prev"
            @click="thumbPrev"
          >
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path
                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                fill="currentColor"
              />
            </svg>
          </div>
          <swiper
            ref="thumbsSwiper"
            :modules="modules"
            :space-between="10"
            :slides-per-view="'auto'"
            :watch-slides-progress="true"
            :centered-slides="false"
            :allow-touch-move="true"
            :free-mode="true"
            :navigation="{
              nextEl: '.thumb-nav-next',
              prevEl: '.thumb-nav-prev',
            }"
            class="thumbs-swiper"
            @swiper="setThumbsSwiper"
            @click="onThumbClick"
          >
            <swiper-slide
              v-for="(item, index) in imgList"
              :key="item.id"
              :class="{ 'thumb-active': currentIndex === index }"
              class="thumb-slide"
              @click="switchToSlide(index)"
            >
              <img
                :src="item.fileUrl"
                crossorigin="anonymous"
                alt=""
                class="thumb-img"
                @click.stop="switchToSlide(index)"
              />
            </swiper-slide>
          </swiper>
          <div
            v-if="imgList.length >= 8"
            class="thumb-nav-button thumb-nav-next"
            @click="thumbNext"
          >
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path
                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                fill="currentColor"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改模板中的关闭按钮部分 -->
    <div class="content-wrapper">
      <transition name="slide">
        <div :class="['content', isShow ? '' : 'update']" v-show="isShow">
          <transition name="close" appear>
            <!-- @click="handleClose" -->
            <img
              src="/static/mediaList/video/close.png"
              alt="关闭详情"
              class="close"
              @click="handleBack"
            />
          </transition>
          <div class="info">
            <h3>详细信息</h3>
            <div class="item">
              <span class="title">照片名称</span>
              <!-- <p>{{ name || "--" }}</p> -->
              <div v-if="isEdit" class="flex">
                <ElInput
                  v-model="name"
                  placeholder="请输入"
                  clearable
                  @input="handleNameInput"
                  @blur="validateName"
                  type="textarea"
                  maxlength="100"                  
                  show-word-limit
                  style="
                    width: 168px;
                    border-radius: 3px;
                    border: 1px solid #2f69eb;
                  "
                />
                <img :src="imgSrc" alt="" class="dui" @click="save" />
                <img :src="imgSrc1" alt="" class="dui" @click="cancelEdit" />
              </div>
              <div v-else>
                <div class="flex editNamewidth">
                  <!-- {{ name }} -->
                  <ElPopover
                    placement="top"
                    trigger="hover"
                    :width="200"
                    v-if="name.length > 30"
                  >
                    <template #reference>
                      <span class="spanText single-line-ellipsis">{{
                        name
                      }}</span>
                    </template>
                    <div class="multi-line-content">
                      {{ name }}
                    </div>
                  </ElPopover>
                  <span class="spanText" v-else>{{ name }}</span>
                  <img
                    class="edit"
                    src="/static/mediaList/video/edit.png"
                    alt=""
                    @click="isEdit = true"
                  />
                </div>
              </div>
            </div>
            <!-- <div class="item">
              <span class="title">分辨率</span>
              <p>{{ record?.resolution || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">照片大小</span>
              <p>{{ record?.fileSize || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">拍摄时间</span>
              <p>{{ record?.takeTime || "--" }}</p>
            </div> -->
            <div class="item">
              <span class="title">任务名称</span>
              <p>{{ record?.taskName || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">航线名称</span>
              <p>{{ record?.airlineName || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">拍摄负载</span>
              <p>{{ record?.deviceModel || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">分辨率</span>
              <p>{{ record?.resolution || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">照片大小</span>
              <p>{{ record?.fileSize || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">拍摄时间</span>
              <p>{{ record?.takeTime || "--" }}</p>
            </div>
            <!-- <div class="item">
              <span class="title">拍摄相对高度</span>
              <p v-if="record?.relativeAltitude">
                ⬆ {{ record.relativeAltitude }}
              </p>
              <p v-else>--</p>
            </div>
            <div class="item">
              <span class="title">拍摄经纬度</span>
              <p v-if="record?.longitude && record?.latitude">
                {{ record.longitude }}
                <span style="margin-left: 10px">{{ record.latitude }}</span>
              </p>
              <p v-else>--</p>
            </div> 
            <div class="item">
              <span class="title">拍摄位置</span>
              <p>{{ record?.address || "--" }}</p>
            </div>-->
            <!-- <img
              src="/static/mediaList/img/recover.png"
              alt=""
              class="recover"
              @click.prevent="recoverBtn"
            /> -->
          </div>
        </div>
      </transition>
    </div>

    <!-- 全屏关闭按钮 -->
    <!-- <transition name="closeAll">
      <img
        v-show="!isShow"
        src="/static/mediaList/video/close.png"
        alt="返回"
        class="closeAll"
        @click="handleBack"
      />
    </transition> -->
    <share ref="shareModal" />
  </div>
</template>

<script lang="ts" setup>
import {
  ElButton,
  ElInput,
  ElMessageBox,
  ElMessage,
  ElTooltip,
  ElPopover,
} from "element-plus";
import { onMounted, ref, nextTick, onUnmounted } from "vue";
import { router } from "#/router";
import { updateName, medialnfo, deleteMedia, imgAll } from "#/api/sys/media";
import share from "../share.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import {
  Navigation,
  Pagination,
  Thumbs,
  Controller,
  FreeMode,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import "swiper/css/free-mode";

interface ImageTransform {
  scale: number;
  translateX: number;
  translateY: number;
  rotate: number;
}
const imageTransforms = ref<Record<string, ImageTransform>>({});
const drawer = ref(true);
const name = ref("");
const originalName = ref(""); // 保存原始名称
const nameError = ref(false); // 名称验证错误状态
const imgList = ref<any[]>([]);
const selectedImgId = ref<string | number>("");
const currentIndex = ref(0);
const imgSrc = ref("/static/mediaList/img/dui.png");
const imgSrc1 = ref("/static/mediaList/img/cuo.png");
const isEdit = ref(false);
const isShow = ref(true);
const record = ref<any>({});
const mainSwiperRef = ref<any>(null);
const thumbsSwiperRef = ref<any>(null);
const pageContainer = ref<HTMLElement | null>(null);
const modules = [Navigation, Pagination, Thumbs, Controller, FreeMode];
const scale = ref(1);
const minScale = 0.5;
const maxScale = 3;
const scaleStep = 0.2;

// 添加拖拽相关变量
const isDragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const translateX = ref(0);
const translateY = ref(0);
const startTranslateX = ref(0);
const startTranslateY = ref(0);
const rotate = ref(0);
const isFullScreen = ref(false);

// 初始化图片变换状态的函数
const initImageTransform = (imageId: string) => {
  if (!imageTransforms.value[imageId]) {
    imageTransforms.value[imageId] = {
      scale: 1,
      translateX: 0,
      translateY: 0,
      rotate: 0,
    };
  }
};

// 完全重置当前图片的变换状态
const resetCurrentImageTransform = () => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId) return;

  // 完全重置当前图片的变换状态
  imageTransforms.value[currentImageId] = {
    scale: 1,
    translateX: 0,
    translateY: 0,
    rotate: 0,
  };

  // 强制更新以确保视图刷新
  updateCurrentImageTransform({});
};

// 获取当前图片的变换状态
const getCurrentImageTransform = () => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId)
    return { scale: 1, translateX: 0, translateY: 0, rotate: 0 };

  initImageTransform(currentImageId);
  return imageTransforms.value[currentImageId];
};

// 更新当前图片的变换状态
const updateCurrentImageTransform = (transform: Partial<ImageTransform>) => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId) return;

  initImageTransform(currentImageId);
  Object.assign(imageTransforms.value[currentImageId], transform);
};

// 添加获取图片样式的函数
const getImageStyle = (imageId: string) => {
  initImageTransform(imageId);
  const transform = imageTransforms.value[imageId];

  return {
    transform: `scale(${transform.scale}) translate(${transform.translateX}px, ${transform.translateY}px) rotate(${transform.rotate}deg)`,
    transition: isDragging.value ? "none" : "transform 0.3s ease",
    cursor: transform.scale > 1 ? "grab" : "default",
  };
};

const positionThumbnails = (targetIndex: number) => {
  if (!thumbsSwiperRef.value || !imgList.value || imgList.value.length === 0) {
    return;
  }

  try {
    let slideToIndex = targetIndex;

    // 使用固定的容器宽度进行计算
    const isLargeScreen = window.innerWidth >= 1920;
    const containerWidth = isLargeScreen ? 1200 : 900;
    const thumbWidth = (isLargeScreen ? 130 : 100) + 10; // 缩略图宽度 + 间距
    const visibleCount = Math.floor(containerWidth / thumbWidth);

    // 让目标缩略图在可视区域中间位置
    const centerOffset = Math.floor(visibleCount / 2);
    slideToIndex = Math.max(0, targetIndex - centerOffset);

    thumbsSwiperRef.value.slideTo(slideToIndex, 300);
  } catch (error) {
    console.error("缩略图定位失败:", error);
  }
};

const onSwiper = (swiper: any) => {
  mainSwiperRef.value = swiper;
  setInitialSlide();
};

const setThumbsSwiper = (swiper: any) => {
  thumbsSwiperRef.value = swiper;
  if (imgList.value && imgList.value.length > 0 && currentIndex.value >= 0) {
    // 延迟一点执行，确保DOM完全渲染
    setTimeout(() => {
      positionThumbnails(currentIndex.value);
    }, 100);
  }
};

// 缩略图导航按钮点击事件
const thumbPrev = () => {
  if (thumbsSwiperRef.value) {
    // 一次向前滚动6张图片
    const currentIndex = thumbsSwiperRef.value.activeIndex;
    const targetIndex = Math.max(0, currentIndex - 6);
    thumbsSwiperRef.value.slideTo(targetIndex, 300);
  }
};

const thumbNext = () => {
  if (thumbsSwiperRef.value) {
    // 一次向后滚动6张图片
    const currentIndex = thumbsSwiperRef.value.activeIndex;
    const maxIndex = Math.max(0, imgList.value.length - 1);
    const targetIndex = Math.min(maxIndex, currentIndex + 6);
    thumbsSwiperRef.value.slideTo(targetIndex, 300);
  }
};

const switchToSlide = (index: number) => {
  if (!mainSwiperRef.value || !imgList.value || imgList.value.length === 0) {
    return;
  }

  if (index < 0 || index >= imgList.value.length) {
    return;
  }

  // 防止重复切换
  if (index === currentIndex.value) {
    return;
  }

  // 先重置当前图片的变换状态为1:1
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (currentImageId) {
    imageTransforms.value[currentImageId] = {
      scale: 1,
      translateX: 0,
      translateY: 0,
      rotate: 0,
    };
  }

  // 更新索引
  currentIndex.value = index;

  // 确保新图片也初始化为1:1状态
  const newImageId = imgList.value[index]?.id;
  if (newImageId) {
    imageTransforms.value[newImageId] = {
      scale: 1,
      translateX: 0,
      translateY: 0,
      rotate: 0,
    };
  }

  // 切换到指定幻灯片
  mainSwiperRef.value.slideTo(index, 300);

  // 缩略图位置调整（保持当前选中项在可视区域）
  positionThumbnails(index);
  updateImageInfo(index);

  // 在DOM更新后确保图片样式正确应用
  nextTick(() => {
    // 更新拖拽光标状态
    const imgElement = document.querySelector(
      ".swiper-slide-active .video"
    ) as HTMLElement;
    if (imgElement) {
      imgElement.style.cursor = "default";
    }
  });
};

// 缩略图点击事件处理
const onThumbClick = (swiper: any, event: MouseEvent) => {
  if (typeof swiper.clickedIndex === "number" && swiper.clickedIndex >= 0) {
    switchToSlide(swiper.clickedIndex);
  }
};

// 缓存图片详情信息，避免重复请求
const imageInfoCache = ref<Record<string, any>>({});

const updateImageInfo = async (index: number) => {
  if (!imgList.value[index]) return;

  const imageId = imgList.value[index].id;
  
  // 检查缓存中是否已有数据
  if (imageInfoCache.value[imageId]) {
    // 使用缓存数据
    name.value = imageInfoCache.value[imageId].fileName;
    originalName.value = imageInfoCache.value[imageId].fileName;
    record.value = imageInfoCache.value[imageId];
  } else {
    // 缓存中没有数据，调用接口获取
    const params = {
      id: imageId,
    };
    const { data } = await medialnfo(params);
    // 保存到缓存
    imageInfoCache.value[imageId] = data;
    name.value = data.fileName;
    originalName.value = data.fileName;
    record.value = data;
  }
};

// 键盘事件处理
// 修改 handleKeydown 函数
const handleKeydown = (event: KeyboardEvent) => {
  // 如果当前焦点在输入框或其他表单元素上，不处理键盘事件
  const activeElement = document.activeElement;
  if (
    activeElement &&
    (activeElement.tagName === "INPUT" ||
      activeElement.tagName === "TEXTAREA" ||
      activeElement.tagName === "SELECT" ||
      activeElement.isContentEditable)
  ) {
    return;
  }

  if (!imgList.value || imgList.value.length <= 1) return;

  switch (event.key) {
    case "ArrowLeft":
      event.preventDefault();
      event.stopPropagation();
      goToPrevious();
      break;
    case "ArrowRight":
      event.preventDefault();
      event.stopPropagation();
      goToNext();
      break;
    case "Escape":
      event.preventDefault();
      event.stopPropagation();
      // 如果当前是全屏状态，先退出全屏
      if (isFullScreen.value) {
        toggleFullScreen();
      } else {
        handleBack();
      }
      break;
    case "Backspace":
      event.preventDefault();
      event.stopPropagation();
      handleBack();
      break;
  }
};

// 上一张图片
const goToPrevious = () => {
  const prevIndex =
    currentIndex.value > 0 ? currentIndex.value - 1 : imgList.value.length - 1;
  switchToSlide(prevIndex);
};

// 下一张图片
const goToNext = () => {
  const nextIndex =
    currentIndex.value < imgList.value.length - 1 ? currentIndex.value + 1 : 0;
  switchToSlide(nextIndex);
};

const onSlideChange = (swiper: any) => {
  if (!swiper || !mainSwiperRef.value) {
    return;
  }
  const activeIndex = swiper.activeIndex;

  // 更新索引前,先重置旧图片的状态
  const oldImageId = imgList.value[currentIndex.value]?.id;
  if (oldImageId) {
    imageTransforms.value[oldImageId] = {
      scale: 1,
      translateX: 0,
      translateY: 0,
      rotate: 0,
    };
  }

  currentIndex.value = activeIndex;

  // 确保新图片初始化为1:1状态
  const newImageId = imgList.value[activeIndex]?.id;
  if (newImageId) {
    imageTransforms.value[newImageId] = {
      scale: 1,
      translateX: 0,
      translateY: 0,
      rotate: 0,
    };
  }

  // 同步缩略图位置
  if (activeIndex >= 0 && activeIndex < imgList.value.length) {
    positionThumbnails(activeIndex);
  }
  updateImageInfo(activeIndex);

  // 更新拖拽光标状态
  nextTick(() => {
    const imgElement = document.querySelector(
      ".swiper-slide-active .video"
    ) as HTMLElement;
    if (imgElement) {
      imgElement.style.cursor = "default";
    }
  });
};

// 修改缩放相关函数
const zoomIn = () => {
  const currentTransform = getCurrentImageTransform();
  if (currentTransform.scale < maxScale) {
    updateCurrentImageTransform({
      scale: currentTransform.scale + scaleStep,
    });
  }
};

const zoomOut = () => {
  const currentTransform = getCurrentImageTransform();
  if (currentTransform.scale > minScale) {
    updateCurrentImageTransform({
      scale: currentTransform.scale - scaleStep,
    });
  }
};

// 重置当前图片的缩放
const resetScale = () => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId) return;

  // 初始化或重置当前图片的变换状态
  imageTransforms.value[currentImageId] = {
    scale: 1,
    translateX: 0,
    translateY: 0,
    rotate: 0,
  };

  // 强制更新以确保视图刷新
  updateCurrentImageTransform({});
};

// 旋转相关函数
const rotateLeft = () => {
  const currentTransform = getCurrentImageTransform();
  updateCurrentImageTransform({
    rotate: currentTransform.rotate - 90,
  });
};

const rotateRight = () => {
  const currentTransform = getCurrentImageTransform();
  updateCurrentImageTransform({
    rotate: currentTransform.rotate + 90,
  });
};

const toggleShowDetail = () => {
  isShow.value = true;
};

const showFullscreenClose = ref(false);

// 修改 toggleFullScreen 函数
const toggleFullScreen = () => {
  const container = document.querySelector(".video-container-img");
  if (!container) return;

  if (!isFullScreen.value) {
    // 进入全屏前，重置当前图片的变换状态为1:1比例
    resetCurrentImageTransform();

    if (container.requestFullscreen) {
      container.requestFullscreen();
    } else if ((container as any).mozRequestFullScreen) {
      (container as any).mozRequestFullScreen();
    } else if ((container as any).webkitRequestFullscreen) {
      (container as any).webkitRequestFullscreen();
    } else if ((container as any).msRequestFullscreen) {
      (container as any).msRequestFullscreen();
    }
    showFullscreenClose.value = true;
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if ((document as any).mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any).webkitExitFullscreen) {
      (document as any).webkitExitFullscreen();
    } else if ((document as any).msExitFullscreen) {
      (document as any).msExitFullscreen();
    }
    showFullscreenClose.value = false;
  }

  // 全屏状态切换后，重新计算图片变换
  nextTick(() => {
    if (isFullScreen.value) {
      // 进入全屏时重置图片变换，确保图片正确显示
      const currentTransform = getCurrentImageTransform();
      // 可以根据需要调整初始缩放比例
    }
  });
};

// 下载文件
const downloadItem = async () => {
  if (imgList.value[currentIndex.value]) {
    // const link = document.createElement("a");
    // link.href = imgList.value[currentIndex.value].fileUrl;
    // link.download = imgList.value[currentIndex.value].fileName || "image";
    // document.body.appendChild(link);
    // link.click();
    // document.body.removeChild(link);
    try {
      if (!imgList.value[currentIndex.value].fileUrl) {
        ElMessage.warning("文件地址无效");
        return;
      }

      // 获取文件数据
      const response = await fetch(imgList.value[currentIndex.value].fileUrl);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      // 转换为blob
      const blob = await response.blob();

      // 创建对象URL
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;

      // 设置下载文件名
      let filename = imgList.value[currentIndex.value].fileName || "download";
      if (imgList.value[currentIndex.value].suffix) {
        filename = `${filename}.${imgList.value[currentIndex.value].suffix}`;
      }

      link.setAttribute("download", filename);
      link.style.display = "none";

      // 添加到DOM中并触发点击
      document.body.appendChild(link);
      link.click();

      // 清理
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } catch (error) {
      // 如果直接下载失败，降级到新窗口打开
      ElMessage.warning("直接下载失败，将在新窗口打开文件");
      window.open(imgList.value[currentIndex.value].fileUrl, "_blank");
    }
  }
};

const shareModal = ref();
const toggleShare = () => {
  shareModal.value.openDialog(imgList.value[currentIndex.value].id);
};

// 开始拖拽
const startDrag = (e: MouseEvent) => {
  const currentTransform = getCurrentImageTransform();
  if (currentTransform.scale <= 1) return;

  isDragging.value = true;
  startX.value = e.clientX;
  startY.value = e.clientY;
  startTranslateX.value = currentTransform.translateX;
  startTranslateY.value = currentTransform.translateY;

  const imgElement = document.querySelector(
    ".swiper-slide-active .video"
  ) as HTMLElement;
  if (imgElement) {
    imgElement.style.cursor = "grabbing";
  }
};

const duringDrag = (e: MouseEvent) => {
  if (!isDragging.value) return;

  const dx = e.clientX - startX.value;
  const dy = e.clientY - startY.value;

  updateCurrentImageTransform({
    translateX: startTranslateX.value + dx,
    translateY: startTranslateY.value + dy,
  });
};

const endDrag = () => {
  isDragging.value = false;

  const imgElement = document.querySelector(
    ".swiper-slide-active .video"
  ) as HTMLElement;
  if (imgElement) {
    const currentTransform = getCurrentImageTransform();
    imgElement.style.cursor = currentTransform.scale > 1 ? "grab" : "default";
  }
};

const spaceInput = (value: string) => {
  name.value = value.replace(/\s+/g, "");
};

const isNavigating = ref(false);

const handleBack = async () => {
  if (isNavigating.value) return;

  isNavigating.value = true;
  try {
    await router.go(-1);
  } finally {
    // 添加一个小延迟确保导航完成
    setTimeout(() => {
      isNavigating.value = false;
    }, 100);
  }
};

const handleClose = () => {
  isShow.value = false;
};

// 处理名称输入
const handleNameInput = (value: string) => {
  // 移除换行符和首尾空格
  let cleanedValue = value.replace(/[\r\n]/g, "").trim();
  name.value = cleanedValue;
};

// 验证名称
const validateName = () => {
  // 检查是否为空或只包含空格
  if (!name.value || name.value.trim() === "") {
    nameError.value = true;
    return false;
  }
  // 检查名称长度
  // if (name.value.length > 20) {
  //   nameError.value = true;
  //   return false;
  // }
  nameError.value = false;
  return true;
};

// 保存名称修改
const save = async () => {
  // 验证名称
  if (!validateName()) {
    ElMessage.error("名称不能为空");
    return;
  }

  // 检查名称是否与原始名称相同
  if (name.value === originalName.value) {
    isEdit.value = false;
    return;
  }

  isEdit.value = false;
  const params = {
    id: imgList.value[currentIndex.value].id,
    fileName: name.value,
  };
  const { code } = await updateName(params);
  if (code == 200) {
    ElMessage.success("修改成功");
    // 更新当前图片的文件名
    imgList.value[currentIndex.value].fileName = name.value;
    // 更新缓存中的数据
    const imageId = imgList.value[currentIndex.value].id;
    if (imageInfoCache.value[imageId]) {
      imageInfoCache.value[imageId].fileName = name.value;
    }
    // 更新原始名称
    originalName.value = name.value;
    // 更新详情信息（从缓存读取，不会发起新请求）
    await updateImageInfo(currentIndex.value);
  } else {
    ElMessage.error("操作失败");
  }
};

const cancelEdit = () => {
  isEdit.value = false;
  name.value = originalName.value; // 恢复原始名称
  nameError.value = false;
};

const recoverBtn = () => {
  isShow.value = false;
};

const delItem = async () => {
  try {
    await ElMessageBox.confirm(
      `确认删除【${name.value}】吗？删除后将无法恢复！`,
      "删除确认",
      {
        type: "warning",
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }
    );
    const { code } = await deleteMedia({
      id: imgList.value[currentIndex.value].id,
    });
    if (code == 200) {
      ElMessage.success("删除成功");
      getAllList();
    } else {
      ElMessage.error("删除失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
      console.error("删除失败:", error);
    }
  }
};

const getDetail = async () => {
  // 复用 updateImageInfo，避免重复调用接口
  await updateImageInfo(currentIndex.value);
};

const setInitialSlide = () => {
  if (!mainSwiperRef.value || !imgList.value || imgList.value.length === 0) {
    return;
  }

  const targetId = router.currentRoute.value.query.id;
  const initialIndex = imgList.value.findIndex(
    (item: any) => item.id == targetId
  );

  if (initialIndex !== -1) {
    // 总是更新currentIndex并执行定位，不管当前值是什么
    currentIndex.value = initialIndex;
    // 设置主图位置
    mainSwiperRef.value.slideTo(initialIndex, 0);
    // 同步设置缩略图位置
    positionThumbnails(initialIndex);
    // 更新详情信息
    updateImageInfo(initialIndex);
  }
};

const getAllList = async () => {
  const params = {
    deviceId: router.currentRoute.value.query.deviceId,
    parentId: router.currentRoute.value.query.parentId,
    fileType: 2,
    deviceType: 2,
  };

  const { data } = await imgAll(params);
  imgList.value = data;
  // 确保默认值为0
  if (currentIndex.value === undefined || currentIndex.value === null) {
    currentIndex.value = 0;
  }
  // 数据加载完成后，如果Swiper已经初始化，设置初始位置
  await nextTick();
  setInitialSlide();
};

// 全屏状态改变处理
const handleFullScreenChange = () => {
  const isFullscreen = !!(
    document.fullscreenElement ||
    (document as any).mozFullScreenElement ||
    (document as any).webkitFullscreenElement ||
    (document as any).msFullscreenElement
  );

  isFullScreen.value = isFullscreen;
  showFullscreenClose.value = isFullscreen;
};

onMounted(async () => {
  await getAllList();
  // getAllList 中的 setInitialSlide 已经调用了 updateImageInfo，无需再次调用 getDetail

  // 设置焦点以确保键盘事件能被监听
  await nextTick();
  if (pageContainer.value) {
    pageContainer.value.focus();
  }

  document.addEventListener("keydown", handleKeydown);
  document.addEventListener("fullscreenchange", handleFullScreenChange);
  document.addEventListener("mozfullscreenchange", handleFullScreenChange);
  document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
  document.addEventListener("msfullscreenchange", handleFullScreenChange);
});

onUnmounted(() => {
  document.removeEventListener("keydown", handleKeydown);
  document.removeEventListener("fullscreenchange", handleFullScreenChange);
  document.removeEventListener("mozfullscreenchange", handleFullScreenChange);
  document.removeEventListener(
    "webkitfullscreenchange",
    handleFullScreenChange
  );
  document.removeEventListener("msfullscreenchange", handleFullScreenChange);
});
</script>
<style scoped lang="scss">
/* 添加Swiper导航按钮样式 */
:deep(.swiper-button-next),
:deep(.swiper-button-prev) {
  color: #fff;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

:deep(.swiper-button-next:hover),
:deep(.swiper-button-prev:hover) {
  background: rgba(0, 0, 0, 0.8);
}

:deep(.swiper-button-next::after),
:deep(.swiper-button-prev::after) {
  font-size: 14px;
  font-weight: bold;
}

:deep(.swiper-button-next) {
  right: 10px;
}

:deep(.swiper-button-prev) {
  left: 10px;
}

:deep(.swiper-pagination-bullet) {
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  width: 8px;
  height: 8px;
  // transition: all 0.3s ease;
}

:deep(.swiper-pagination-bullet-active) {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

:deep(.swiper) {
  width: 100%;
  height: 100%;
}

:deep(.swiper-slide) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pages {
  width: 100%;
  height: calc(100vh - 86px);
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  overflow: hidden; /* 防止页面滚动 */
  outline: none; /* 隐藏焦点轮廓 */
}

.content-wrapper {
  position: relative;
  width: 316px;
  height: 100%;
  flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

.left {
  width: calc(100% - 1244px);
  height: 100%;
  background: #000;
  flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

.title-left {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  margin-top: 66px;
  margin-left: 66px;
  padding-right: 30px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.edit-title {
  margin-top: 66px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit {
  width: 14px;
  height: 14px;
  margin-left: 8px;
}

.center {
  width: 900px;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

/* 添加单行省略号样式 */
.single-line-ellipsis {
  display: inline-block;
  max-width: 200px; /* 根据实际需要调整宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.edit-name {
  width: 180px !important;
}

.video-container {
  position: relative;
}

.video-title-info {
  position: absolute;
  top: 90px;
  left: 12px;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 99;
}

.time {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.info-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  margin-top: 40px;
}

.info-top > span {
  margin-right: 42px;
}

.video-container-img {
  width: 900px;
  height: 506px;
  overflow: hidden; /* 隐藏超出区域 */
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none; /* 防止拖拽时选中图片 */
  background: #000;
  position: relative;
}

.video {
  transform-origin: center center; /* 设置缩放和旋转中心点 */
  max-width: none;
  max-height: none;
  height: 100%;
  width: 100%;
  display: block;
  margin: 0 auto;
  background-color: transparent;
}

.video-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  cursor: pointer;
}

.img-center {
  width: 18px;
  height: 18px;
}

.margin-left {
  margin-left: 32px;
}

.divider {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: #fff;
  opacity: 0.5;
  border-radius: 2px;
}

/*.center-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.little-img {
  width: 98px;
  height: 62px;
  margin-right: 10px;
}*/

.center-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  overflow-x: auto; /* 允许横向滚动 */
  overflow-y: hidden;
  scrollbar-width: none; /* 隐藏滚动条 */
  -ms-overflow-style: none; /* 隐藏IE滚动条 */
  padding: 0 10px;
}

.center-img::-webkit-scrollbar {
  display: none; /* 隐藏Chrome滚动条 */
}

.video-container {
  position: relative;
}

.little-img-container {
  width: 98px;
  height: 62px;
  margin-right: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.3s ease;
  flex-shrink: 0;
}

.little-img-container.selected {
  border-color: #2f69eb;
}

.little-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  width: 316px;
  height: 100%;
  // background: #191919;
  margin-left: 38px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.update {
  // background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  width: 316px;
  height: 100%;
  padding-left: 18px;
  position: relative;
  box-sizing: border-box;
}

.close,
.closeAll {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  right: 40px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
  transform-origin: center;
}

.close:hover,
.closeAll:hover {
  opacity: 1;
  transform: rotate(90deg) scale(1.1);
}

.close:active,
.closeAll:active {
  transform: rotate(90deg) scale(0.95);
}

.closeAll {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
  transform-origin: center;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 8px;
  width: 30px;
  height: 30px;
}

.closeAll:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
  transform: rotate(90deg) scale(1.15);
}

.closeAll:active {
  transform: rotate(90deg) scale(0.95);
}

.closeAll.clicking {
  animation: clickAnimation 0.3s ease;
}

@keyframes clickAnimation {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(0.9);
  }
  100% {
    transform: rotate(90deg) scale(1);
  }
}

/* 详情面板关闭按钮 */
.content-wrapper .close {
  z-index: 10;
}

/* 全屏模式下的关闭按钮 */
.closeAll {
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 8px;
  width: 30px;
  height: 30px;
}

.closeAll:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: rotate(90deg) scale(1.15);
}

/* 进入和离开的过渡动画 */
.slide-enter-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-leave-active {
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 全屏关闭按钮过渡动画 */
.closeAll-enter-active {
  transition: all 0.3s ease-out;
}

.closeAll-leave-active {
  transition: all 0.2s ease-in;
}

.closeAll-enter-from {
  opacity: 0;
  transform: scale(0.8) rotate(180deg);
}

.closeAll-leave-to {
  opacity: 0;
  transform: scale(0.8) rotate(180deg);
}

.info {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  place-content: flex-start flex-start;
  width: 284px;
  height: 506px;
  background: #191919;
  padding-left: 14px;
  margin-top: 70px;
}

h3 {
  font-weight: 600;
  font-size: 12px;
  margin-top: 24px;
  margin-bottom: 22px;
}

.dui {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
}

.item {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
  font-size: 12px;
}

.title {
  font-weight: 500;
  opacity: 0.6;
  width: 50px;
  margin-right: 12px;
}

.edit {
  color: var(--el-color-primary);
  margin-left: 10px;
  cursor: pointer;
}

.recover {
  position: absolute;
  left: 16px;
  bottom: 10px;
  width: 14px;
  height: auto;
  cursor: pointer;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

:deep(.el-input__wrapper) {
  background-color: #191919;
  border-radius: none;
  box-shadow: none;
  font-size: 10px;
}

:deep(.el-input__inner) {
  color: #fff;
}

/* 全屏样式 */
.video-container-img:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-container-img:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-container-img:-moz-full-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-container-img:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* 添加过渡动画样式 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from,
.slide-leave-to {
  // transform: translateX(100%);
  // opacity: 0;
}

// 缩略图样式
.thumbnail-container {
  width: 900px;
  margin: 20px auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.thumb-nav-button {
  width: 36px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  flex-shrink: 0;
  z-index: 10;
  user-select: none;

  &:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #2f69eb;
  }

  &:active {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
  }

  svg {
    pointer-events: none;
  }
}

.thumb-nav-prev {
  margin-right: 10px;
}

.thumb-nav-next {
  margin-left: 10px;
}

.thumbs-swiper {
  width: 100%;
  height: 62px;
  background: transparent;
  overflow: hidden;

  :deep(.swiper-slide) {
    width: 100px !important;
    height: 62px !important;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
  }

  :deep(.swiper-slide.thumb-active) {
    .thumb-img {
      opacity: 1 !important;
      border: 2px solid #2f69eb !important;
      box-shadow: 0 0 12px rgba(47, 105, 235, 0.6);
    }
  }
}

.thumb-slide {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
}

.thumb-img {
  width: 100px;
  height: 62px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-sizing: border-box;
  display: block;
  pointer-events: auto;
}

.thumb-active .thumb-img,
.thumb-img:hover {
  opacity: 1;
  border: 2px solid #2f69eb;
  box-sizing: border-box;
}

// .main-swiper {
//   width: 100%;
//   height: 506px;
// }

:deep(.main-swiper .swiper-slide) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.editNamewidth {
  width: 200px;
}

@media (min-width: 1900px) {
  .editNamewidth {
    width: 250px;
  }
  // 缩略图样式
  .thumbnail-container {
    width: 1200px;
  }

  .thumb-nav-button {
    width: 42px;
    height: 84px;
  }

  .thumbs-swiper {
    height: 84px;

    :deep(.swiper-slide) {
      width: 132px !important;
      height: 84px !important;
    }
  }

  .thumb-img {
    width: 132px;
    height: 84px;
    border-radius: 6px;
  }

  .left {
    width: 260px;
  }

  .center {
    width: 1200px;
    font-size: 18px;
  }

  .single-line-ellipsis {
    max-width: 300px;
  }

  .edit-name {
    width: 210px !important;
  }

  .content-wrapper {
    width: 420px;
  }

  .video-title-info {
    font-size: 16px;
  }

  .time {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }

  .thumb-img {
    width: 132px;
    height: 83px;
    // background: rgba(0, 0, 0, 0.46);
  }

  .info {
    width: 378px;
    height: 674px;
    background: #191919;
    margin-top: 80px;
  }

  .info-top > span {
    margin-right: 58px;
    font-size: 21px;
  }

  .content {
    width: 420px;
    padding-left: 20px;
    font-size: 14px;
    margin-left: 40px;
  }

  .title-left {
    margin-top: 88px;
    margin-left: 88px;
    font-size: 18px;
  }

  .edit-title {
    margin-top: 88px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .edit {
    width: 18px;
    height: 18px;
    margin-left: 10px;
  }

  .video-container-img {
    width: 1200px;
    height: 675px;
  }

  .video {
    width: 1200px;
    height: 675px;
  }

  /* 全屏模式下的图片样式 */
  :fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-webkit-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-moz-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-ms-fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .img-center {
    width: 24px;
    height: 24px;
  }

  .little-img-container {
    width: 130px;
    height: 82px;
    margin-right: 12px;
  }

  .margin-left {
    margin-left: 44px;
  }

  .divider {
    right: -22px;
    top: 50%;
    height: 22px;
  }

  .little-img {
    width: 130px;
    height: 82px;
    margin-right: 12px;
  }

  .update {
    width: 420px;
    padding-left: 24px;
    font-size: 14px;
  }

  .close,
  .closeAll {
    width: 20px;
    height: 20px;
    top: 34px;
    right: 34px;
  }

  .closeAll {
    width: 40px;
    height: 40px;
    padding: 10px;
  }

  h3 {
    font-size: 16px;
    margin-top: 32px;
    margin-bottom: 28px;
  }

  .dui {
    width: 18px;
    height: 18px;
    margin-left: 12px;
  }

  .title {
    min-width: 84px;
    margin-right: 16px;
  }

  .item {
    margin-bottom: 16px;
  }

  .recover {
    left: 20px;
    bottom: 12px;
    width: 18px;
  }

  :deep(.el-input__wrapper) {
    font-size: 14px;
  }

  /* 响应式Swiper样式 */
  :deep(.swiper-button-next),
  :deep(.swiper-button-prev) {
    width: 40px;
    height: 40px;
  }

  :deep(.swiper-button-next::after),
  :deep(.swiper-button-prev::after) {
    font-size: 18px;
  }

  :deep(.swiper-pagination-bullet) {
    width: 10px;
    height: 10px;
  }

  :deep(.swiper-pagination-bullet-active) {
    width: 24px;
  }

  /* 全屏模式下的图片样式 */
  :fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-webkit-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-moz-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-ms-fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}

/* 添加多行内容样式 */
.multi-line-content {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
}

.spanText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

:deep(.el-textarea__inner) {
  font-size: 12px !important;
}
</style>